<template>
  <hooyn-nav-bar
    class="header"
    leftIcon="arrow-left"
    title="内容详情"
    leftIconfont="true"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  />
  <div class="details">
    <div class="details-top">
     {{  data.item.Name }}
    </div>
    <div class="details-item">
      <div class="item-left">
     {{  data.item.Issue }}</div>
      <div class="item-right"> {{  data.item.Pubdate }}</div>
    </div>
  </div>
  <div class="details-conton" >
        <p v-html="data.item.titleitem "></p>
  </div>
  <!-- <div class="details-bottom">
    <ul>
        <li><van-icon name="star-o" />收藏</li>
        <li><img src="../../assets/fenxiang.png" class="fenxiang">分享</li>
        <li><van-icon name="good-job-o" />点赞</li>
    </ul>
  </div> -->
</template>
<script setup >

import $api from '@/utils/api'
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      item:'',
      list:[
      ]
    })
   const activedeta = () => {
    $api.activedetails({ID:route.query.ID}).then(res=>{
        console.log(res);
        data.item = res.message[0]
      })
   }
 
    onMounted(()=> {
      activedeta()
    })
</script>
<style lang="scss" scoped>
.details-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    height: 3rem;
    background-color: #fff;
    width: 100%;
    line-height: 3rem;
ul{
    display: flex;
    justify-content: center;
    li{
        width: calc(100% / 3);
        text-align: center;
        font-size: .9rem;
        color: #7A7A7A;
        .van-icon{
          color: #7A7A7A;
            font-size: 1rem;
            margin-right: .2rem;
        }
       
        img{
          position: relative;
          top: 0.1rem;
          margin-right: .2rem;
          width: .9rem;
          height: .9rem;
        }
    }
}
}
.details{
    padding: 1rem;
    box-sizing: border-box;
    .details-top{
        font-size: 1rem;
    }
    .details-item{
        margin-top: .5rem;
        display: flex;
        justify-content: space-between;
        div{
            color: #ccc;
        }
    }
}
.details-conton{
    padding: 1rem;
    padding-top: 0rem;
    box-sizing: border-box;
    p{
      margin: .5rem 0;
        font-size: .9rem;
        line-height: 1.5rem;
    }
}
.header {
  .outlogin{
    width: 100%;
    font-size: .875rem;
  }
  img {
    max-width: 5.5rem;
    height: 1.75rem;
  }
}
</style>